<template>
	<view class="">
		
		<public-view navType="other" navTitle=" ">
			<view class="top-image">
				<swiper style="width: 100%;height: 100%;" autoplay circular>
					<swiper-item v-for="(item, index) in car_info.pic_video" :key="index">
						<view class="" style="width: 100%;height: 100%;" v-if="isVideo(item)" >
							<dom-video :src="item" ref="domVideo" :autoplay="false" :loop="false" :controls="true"></dom-video>
						</view>
						<!-- <video v-if="isVideo(item)" style="width: 100%;height: 100%;" :src="item" mode="aspectFit"></video> -->
						<image @click="showClickSwiper" v-else style="width: 100%;height: 100%;" :src="item" mode="aspectFit"></image>
					</swiper-item>
				</swiper>
			</view>
			<view class="content flex f-d-c a-i-c">
				<view class="mar-b20 w-100" style="background: #FFFFFF;border-radius: 24rpx;">
					<view class="car-info-box flex f-d-c">
						<view class="car-name f-s-30 f-w-b">
							{{car_info.name||""}}
						</view>
						<view class="tag-list-box f-s-24 l-h-34 color-2567F3 flex a-i-c f-w-4">
							<view class="item">
								{{car_info.tag_text||""}}
							</view>
							<!-- <view class="item">
								标签一
							</view> -->
						</view>
						<view class="moneycar f-s-36 f-w-b l-h-38">
							<text style="font-style: italic;">{{car_info.price_text||""}}</text><text class="f-s-22 f-w-4">万</text>
						</view>
					</view>
				</view>
				<view class="fenqi-box flex j-c-b a-i-c w-100">
					<view class="left flex a-i-c">
						<view class="f-s-30 f-w-b name">
							分期购车
							<image class="hot-icon" src="@/static/images/hot-icon.svg" mode=""></image>
						</view>
						<view class="color-999 f-s-30">
							超低首付开回家
						</view>
					</view>
					<view class="right all-center f-s-24 color-fff" @click="showjisuanqi">
						<image class="jisuanqi" src="@/static/images/jisuanqi.svg" mode=""></image>
						月供计算
					</view>
				</view>
				<view class="store-list-box">
					<view class="location-name-box w-100 flex a-i-c j-c-b" @click="goTo({url:'/pages/findCarSearch/nearbyStores'})">
						<view class="left f-s-30 f-w-b">
							门店预约
						</view>
						<view class="right" style="color: #525252;">
							全部
							<image class="icon" src="@/static/images/all-location.svg" mode=""></image>
						</view>
					</view>
					<view class="store-scroll">
						<scroll-view scroll-x="true" class="scroll">
							<view class="scroll-viewa">
								<block v-for="(item,index) in store_list" :key="index">
									<view class="item flex f-d-c" @click="changeStore(item)">
										<view class="active-store all-center" :class="store_id === item.id?'active':'unactive'">
											<image class="duigou" v-if="store_id === item.id" src="@/static/images/duigou.svg" mode=""></image>
										</view>
										<view class="store-name f-s-28 f-w-b">
											{{item.name||""}}
										</view>
										<view class="address color-999 f-s-20 l-h-28">
											{{item.distance||0}}km | {{item.address||""}}
										</view>
										<view class="operate-box f-s-24 flex a-i-c">
											<view class="item2 bg1 all-center" @click="$callPhone(item.contact.m.number)">
												<image class="phone-icon" src="@/static/images/my/store-phone-icon.svg" mode=""></image>
												打电话
											</view>
											<view class="item2 bg2 all-center" @click="$location.openMapLocation(item.lat,item.lng)">
												<image class="phone-icon" src="@/static/images/my/store-map-icon.svg" mode=""></image>
												到这去
											</view>
										</view>
									</view>
								</block>
							</view>
						</scroll-view>
					</view>
				</view>
				<view class="setting-box flex f-d-c">
					<view class="location-name-box w-100 flex a-i-c j-c-b">
						<view class="left f-s-30 f-w-b">
							参数配置
						</view>
						<view class="right" style="color: #525252;">
							<!-- 全部 -->
							<!-- <image class="icon" src="@/static/images/all-location.svg" mode=""></image> -->
						</view>
					</view>
					<view class="imgaaa" style="height: auto;">
						<block v-for="(item, index) in car_info.info.data" :key="index">
						<view class="flex a-i-c f-s-28 item">
							<view class="title color-999">
								{{Object.keys(item)[0]}}
							</view>
							<view class="">
								{{item[Object.keys(item)[0]]}}
							</view>
						</view>
						</block>
					</view>
				</view>
				<view class="" style="height: 200rpx;">
					
				</view>
				<view class="bottombtn-box flex a-i-c j-c-a">
					<view class="item-phone flex f-d-c a-i-c color-666 f-s-26 l-h-36" @click="$callPhone(store_data.contact.m.number)">
						<image class="icon" src="@/static/images/search-icon-phone.svg" mode=""></image>
						联系平台
					</view>
					<view class="service-btn all-center color-fff f-s-30 f-w-b" @click="showReadyPopup">
						定金预约
						<view class="bottomflur">
							
						</view>
					</view>
				</view>
				<view class="bottom-l"></view>
			</view>
		</public-view>
		<uni-popup ref="readyMoney" type="bottom">
			<view class="ready-money-box flex a-i-c f-d-c w-100">
				<view class="top-title f-s-28 f-w-b">
					定金支付
				</view>
				<view class="address-box w-100 a-i-c j-c-b flex" @click="$location.openMapLocation(store_data.lat,store_data.lng)">
					<view class="title f-s-30">
						{{store_data.name||""}}
					</view>
					<view class="locaiton color-979797 f-s-24 flex a-i-c">
						<image class="locaiton-icon" src="@/static/images/circle/location-icon.svg" mode=""></image>
						{{store_data.address||""}}
					</view>
					<image class="next-ic" src="@/static/images/next-icon3.svg" mode=""></image>
				</view>
				<view class="list-box">
					<view class="item flex a-i-c color1">
						<image class="car-logo" :src="car_info.pic" mode=""></image>
						<view class="car-other ">
							<view class="name f-s-28 line-h-40 f-w-b">
								{{car_info.name||""}}
							</view>
							<view class="moneycar f-s-36 f-w-b l-h-38">
								<text style="font-style: italic;">{{car_info.price_text}}</text><text class="f-s-22 f-w-4">万</text>
							</view>
							<view class="f-s-26 color-999">
								定金￥ <text class="color-FF3158 f-s-34">{{car_info.front_price||0}}</text>
							</view>
						</view>
					</view>
				</view>
				<view class="ready-user-box flex a-i-c">
					<view class="title f-s-26">
						姓名
					</view>
					<input class="f-s-24 l-h-34" type="text" v-model="user_name" placeholder="请输入预约人姓名" placeholder-style="color:#bababa;">
				</view>
				<view class="ready-user-box flex a-i-c mar-b-36">
					<view class="title f-s-26">
						电话
					</view>
					<input class="f-s-24 l-h-34" type="number" v-model="user_mobile" placeholder="请输入预约人电话" placeholder-style="color:#bababa;">
				</view>
				<view class="w-100 flex f-d-c zhifutype">
					<block v-for="(item, index) in pay_list" :key="index">
						<view class="item flex a-i-c j-c-b" @click="changepayType('pay_type',item.type)">
							<view class="flex a-i-c f-s-26 color-333">
								<image class="icon" :src="item.icon" mode=""></image>
								{{item.name}}
								<text v-if="item.pay_type === 'balance'" class="mar-l" style="color: #F32E2E;">¥{{item.value||""}}</text>
							</view>
							<view class="active-store all-center" :class="pay_type ===item.type?'active':'unactive'">
								<image class="duigou" v-if="pay_type ===item.type" src="@/static/images/duigou.svg" mode=""></image>
							</view>
						</view>
					</block>
				</view>
				<view class="w-100 flex a-i-c j-c-b bakc-money">
					<view class="flex a-i-c" @click="refund_flag = !refund_flag">
						<view class="active-store all-center" :class="refund_flag?'active':'unactive'">
							<image class="duigou" v-if="refund_flag" src="@/static/images/duigou.svg" mode=""></image>
						</view>
						<view class="bakc-name f-s-26">
							退定金保险
						</view>
						<text class="f-s-26" style="color: #F32E2E;">¥{{car_info.refund_price}}</text>
						<text class="tip-name f-s-22 color-999">购买可享无责退定金服务</text>
					</view>
					<view class="tab-money all-center f-s-24">
						无忧退
					</view>
				</view>
				<view class="money-btn-boew w-100 j-c-b a-i-c flex">
					<view class="f-s-30" style="color: #FF3158; f-w-b">
						<text class="color-999 f-s-26 f-w-4 tilll">定金</text><text class="f-s-26">￥</text>{{car_info.front_price||0}}
					</view>
					<view class="service-btn all-center color-fff f-s-30 f-w-b" @click="payMoneyPost(false)">
						立即支付
						<view class="bottomflur">
							
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="jisuanqi1" type="bottom">
			<view class="ready-money-box flex a-i-c f-d-c w-100">
				<view class="top-title f-s-28 f-w-b">
					月供计算
				</view>
				<view class="shoufu w-100">
					<view class="title f-s-28 w-100">
						首付比例
					</view>
					<view class="bili-list w-100 flex f-w-w j-c-b">
						<block v-for="(item, index) in 4" :key="index">
							<view class="item activea f-s-24 all-center">
								20%
							</view>
						</block>
					</view>
				</view>
				<view class="bottom-btn-box flex a-i-c f-s-30">
					<view class="item all-center btn1" @click="close('jisuanqi1',1,false)">
						取消
					</view>
					<view class="item all-center btn2" @click="close('jisuanqi1',1,true)">
						确定
					</view>
				</view>
			</view>
		</uni-popup>
		<pay-password ref="showpay" @enter="successPayPassword"></pay-password>
		<uni-popup ref="jisuanqi" type="bottom">
			<view class="ready-money-box flex a-i-c f-d-c w-100">
				<view class="top-title f-s-28 f-w-b">
					月供计算
				</view>
				<view class="shoufu w-100">
					<view class="title f-s-28 w-100">
						首付比例
					</view>
					<view class="bili-list w-100 flex f-w-w j-c-b">
						<block v-for="(item, index) in car_info.loan.payment" :key="index">
							<view @click="changeMoney('index_money',item)" class="item f-s-24 all-center" :class="index_money === item?'active color-fff':'un-acitve'">
								{{item}}%
							</view>
						</block>
					</view>
				</view>
				<view class="shoufu w-100">
					<view class="title f-s-28 w-100">
						期数
					</view>
					<view class="bili-list w-100 flex f-w-w j-c-b">
						<block v-for="(item, index) in car_info.loan.stages" :key="index">
							<view @click="changeMoney('fenqi_money',item)" class="item f-s-24 all-center" :class="fenqi_money === item?'active color-fff':'un-acitve'">
								{{item}}期
							</view>
						</block>
					</view>
				</view>
				<view class="shoufu w-100">
					<view class="title f-s-28 w-100">
						计算方式
					</view>
					<view class="bili-list w-100 flex f-w-w j-c-b">
						<block v-for="(item, index) in calculate_type" :key="index">
							<view @click="changeMoney('calculate_type_id',item.id)" class="item f-s-24 all-center" :class="calculate_type_id === item.id?'active color-fff':'un-acitve'">
								{{item.title}}
							</view>
						</block>
					</view>
				</view>
				<view class="w-100 color-999 f-s-22">
					*该结果仅供参考，费用以实际方案为主
				</view>
				<view class="tip-money-box w-100 flex a-i-c j-c-a">
					<view class="item w-100 flex f-d-c a-i-c j-c-b">
						<view class="top-text f-s-40 f-w-b">
							{{payment_money}}<text class="f-s-22 f-w-4">万</text>
						</view>
						<view class="f-s-22">
							首付总额
						</view>
					</view>
					<view class="item w-100 flex f-d-c a-i-c j-c-b">
						<view class="top-text f-s-40 f-w-b">
							{{month_money}}<text class="f-s-22 f-w-4">万</text>
						</view>
						<view class="f-s-22">
							月供
						</view>
					</view>
					<view class="item w-100 flex f-d-c a-i-c j-c-b" style="white-space: nowrap;">
						<view class="top-text f-s-40 f-w-b">
							<text class="f-s-22 f-w-4">总计</text>
							<text style="color: #F32E2E;">{{total_money}}</text>
							<text class="f-s-22 f-w-4">万</text>
						</view>
						<view class="f-s-22">
							期数{{fenqi_money||0}}期
						</view>
					</view>
				</view>
				<view class="f-s-28 color-333 f-w-b w-100" style="margin-top: 30rpx;">
					贷款的费用明细
				</view>
				<scroll-view :scroll-y="true" class="loan_info_scroll">
					<view class="f-s-24 color-333" v-for="(item, index) in car_info.loan_info" :key="index">
						<text class="f-w-b">{{item.key||""}}:</text> ￥{{item.value||""}}
					</view>
				</scroll-view>
				
				<view class="bottombtn-box flex a-i-c j-c-a" style="position: relative;">
					<view class="item-phone flex f-d-c a-i-c color-666 f-s-26 l-h-36">
						<image class="icon" src="@/static/images/search-icon-phone.svg" mode=""></image>
						联系平台
					</view>
					<view class="service-btn all-center color-fff f-s-30 f-w-b" @click="showReadyPopup">
						定金预约
						<view class="bottomflur">
							
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {getStoreList} from "@/utils/pagePublic.js"
	import {goTo,reditTo} from "@/nav.js"
	import isDomVideo from "@/components/ls-dom-video/ls-dom-video.vue"
	import payPassword from "@/components/myComponents/paypassword.vue"
	export default {
		components:{
			"pay-password":payPassword,
			"dom-video":isDomVideo
		},
		data() {
			return {
				pay_list:[
					{
						id:'1',
						icon:"/static/images/weixinicon.svg",
						name:"微信支付",
						type: "wechat",
						value: "0.00"
					},
					{
						id:'2',
						icon:"/static/images/zhifubao.svg",
						name:"支付宝支付",
						type: "alipay",
						value: "0.00"
					},
					{
						id:'3',
						icon:"/static/images/yue.svg",
						name:"余额支付",
						type: "balance",
						value: "0.00"
					}
				],
				pay_type:"",
				id:"",
				car_info:{info:{data:[]},loan:{payment:[],stages:[]}},
				index_money:"",
				fenqi_money:"",
				calculate_type:[{id:1,title:"等额本息"},{id:2,title:"等额本金"}],
				calculate_type_id:1,
				month_money:"0.00万",
				payment_money:"0.00万",
				total_money:"0.00万",
				refund_flag:true,
				user_name:"",
				user_mobile:"",
				store_list:[],
				store_id:-1,
				store_data:{},
				pay_pass:""
			};
		},
		// computed:{
		// 	payTypeList(){
		// 		let list = []
		// 		list = this.$store.state.pay_type_list
				
		// 		for(let a in list){
		// 			this.pay_list.forEach(val=>{
		// 				if(list[a].type === val.type){
		// 					list[a] = val
		// 				}
		// 			})
		// 		}
		// 		return list
		// 	}
		// },
		onLoad(o) {
			console.log(o)
			this.id = o.id
			this.$store.state.pay_type_list.map(val=>{
				this.pay_list.forEach(value=>{
					if(val.type === value.type){
						value.valuea = val.value||0
						value.type = val.type,
						value.name = val.name
						value.checked = false
					}
				})
			})
			this.pay_type = this.$store.state.pay_type_list[0].type||""
			this.getCarInfo()
			this.getLocationF()
		},
		onShow(){
			let data = this.$store.state.ready_stroe||[]
			console.log(data)
			if(data.length>0){
				this.store_data = data
				this.store_id = data.id
			}
		},
		methods:{
			goTo,reditTo,
			showClickSwiper(){
				let images = []
				this.car_info.pic_video.map(val=>{
					if(!this.isVideo(val)){
						images.push(val)
					}
				})
				this.$prviceImage(images)
			},
			isVideo(item){
				console.log(item,"isVideo")
				var videoExts = ['mp4', 'avi', 'mov', 'wmv', 'flv', 'mkv'];
				  var ext = item.split('.').pop().toLowerCase();
				  console.log(videoExts.indexOf(ext) !== -1,"isVideo")
				  return videoExts.indexOf(ext) !== -1;
			},
			changeStore(item){
				this.store_id = item.id
				this.store_data = item
				this.$store.commit("changeReadyStore",item)
				console.log(this.$store.state.ready_stroe)
			},
			getLocationF(){
				let that = this
				that.$location.myGetLocation((res)=>{
					that.lng = res.lng
					that.lat = res.lat
					that.getNearByStoreList(res)
				},false)
			},
			getNearByStoreList(res){
				let that = this
				getStoreList({
					lng:res.lng,
					lat:res.lat,
					page:1,
					rows:10
				},res=>{
					that.store_list = res.data.data
					if(that.store_id === -1){
						that.store_id = that.store_list[0].id
						that.store_data = that.store_list[0]
						that.$store.commit("changeReadyStore",that.store_list[0])
					}
				})
			},
			successPayPassword(e){
				this.pay_pass = e
				this.payMoneyPost(true)
			},
			payMoneyPost(isPasswoed=false){
				let that = this
				if(that.user_mobile&&that.user_name){
					if(that.pay_type === 'balance' && !isPasswoed){
						console.log(that.$store.state.userInfo)
						if(that.$store.state.userInfo.pay_pass){
							that.$refs.showpay.show()
						}else{
							uni.showModal({
								title:"温馨提示",
								content:"您未设置支付密码",
								confirmText:"去设置",
								success(res){
									if(res.confirm){
										that.goTo({url:"/pages/my/changePayPassword"})
									}
								}
							})
						}
						return 
					}
					that.util.postRequest({
						url:"v1/order/create",
						data:{
							type:'0',
							lorry_id:that.car_info.id,
							real_store_id:that.store_id,
							refund_flag:that.refund_flag,
							name:that.user_name,
							mobile:that.user_mobile,
							loan_info:{
								payment: that.payment_money||0,   //首付
								stages: that.fenqi_money||0,  //分几期
								rate:that.index_money||0     //利率
							},
							method:"POST"
						}
					}).then(res=>{
						console.log(res)
						that.$createPay({
							pay_type:that.pay_type,
							pay_pass:that.pay_pass||"",
							order_ids:[res.data[0].id],
							method:"POST"
						},(bres=>{
							let timeout = setTimeout(()=>{
								clearTimeout(timeout) 
								that.reditTo({url:'/pages/my/orderInfo?id='+res.data[0].id})
							},600)
						}))
					}).catch(e=>{
						uni.showToast({
							title:e.msg||"请求失败",
							icon:"none"
						})
					})
				}else{
					uni.showToast({
						title:"请填写姓名和手机号",
						icon:"none"
					})
				}
			},
			changepayType(type,item){
				this[type] = item
			},
			changeMoney(type,item){
				this[type]=item
				this.allMoneySet()
			},
			allMoneySet(){
				let that = this
				that.util.postRequest({
					url:"v1/lorry/calculate",
					data:{
						price:Number(that.car_info.compute_price) || that.car_info.price,
						payment:that.index_money,
						stage:that.fenqi_money,
						"rate":that.car_info.loan.rate,
						calculate_type:that.calculate_type_id
					}
				}).then(res=>{
					console.log(res)
					that.month_money = res.data.month_money
					that.payment_money = res.data.payment_money
					that.total_money = res.data.total_money
				})
			},
			close(text="",type,close=false){
				// this.$refs.
			},
			getCarInfo(){
				let that = this
				that.util.postRequest({
					url:"v1/lorry/info",
					data:{
						id:that.id
					}
				}).then(res=>{
					console.log(res)
					that.car_info = res.data
					console.log(that.car_info.pic_video,'pic_video')
					that.fenqi_money = that.car_info.loan.stages[0]
					that.index_money = that.car_info.loan.payment[0]
					that.allMoneySet()
				}).catch(e=>{
					uni.showToast({
						title:"参数错误",
						icon:"none"
					})
				})
			},
			showjisuanqi(){
				this.$refs.jisuanqi.open()
			},
			showReadyPopup(){
				this.$refs.jisuanqi.close()
				this.$refs.readyMoney.open()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.loan_info_scroll{
		width: 100%;
		height: 150rpx;
		margin-top: 30rpx;
	}
	.bottom-btn-box{
		.item{
			width: 272upx;
			height: 96upx;
			border-radius: 128upx;
		}
		.btn1{
			border: 2upx solid #979797;
			color: #979797;
			margin-right: 10upx;
		}
		.btn2{
			background: #2567F3;
			color: #FFFFFF;
		}
	}
	.money-btn-boew{
		width: 100%;
		.tilll{
			margin-right: 12upx;
		}
	}
	.bakc-money{
		margin-bottom: 20upx;
		.tab-money{
			border: 1upx solid #2567F3;
			border-radius: 4upx;
			width: 100upx;
			height: 42upx;
			color: #2567F3;
		}
		.tip-name{
			margin-left: 20upx;
		}
		.bakc-name{
			margin-right: 14upx;
			margin-left: 20upx;
		}
	}
	.zhifutype{
		margin-bottom: 76upx;
		.item{
			width: 100%;
			margin-bottom: 26upx;
			.icon{
				width: 40upx;
				height: 40upx;
				margin-right: 26upx;
			}
		}
	}
	.active-store{
		border-radius: 50%;
		width: 36upx;
		height: 36upx;
		border: 2rpx solid #2567f3;
		.duigou{
			width: 24upx;
			height: 16upx;
		}
	}
	.active{
		background: #2567F3;
	}
	.unactive{
		border: 2upx solid #9F9F9F;
	}
	.mar-b-36{
		margin-bottom: 52upx;
	}
	.mar-l{
		margin-left: 22upx;
	}
	.ready-money-box{
		width: 750upx;
		background: #FFFFFF;
		border-radius: 40upx 40upx 0px 0px;
		padding-top: 20upx;
		padding-left: 40upx;
		padding-right: 40upx;
		padding-bottom: 48upx;
		.tip-money-box{
			background: #FFFFFF;
			border: 2upx solid #999999;
			height: 142upx;
			padding: 20upx 0;
			margin-top: 24upx;
			.item{
				height: 100%;
			}
		}
		.shoufu{
			margin-top: 40upx;
			.bili-list{
				&::after{
					content: "";
					width: 206upx;
					height: 72upx;
					margin-bottom: 16upx;
				}
				.item{
					width: 206upx;
					height: 72upx;
					margin-bottom: 16upx;
				}
				.un-acitve{
					background: #F9FAFC;
					border-radius: 8upx;
				}
				.activea{
					background: #E2ECFF;
					border-radius: 8upx;
					color: #2567F3;
				}
			}
			.title{
				line-height: 40upx;
				margin-bottom: 24upx;
			}
			&::after{
				width: 100upx;
				content: " ";
			}
		}
		.ready-user-box{
			width: 100%;
			padding: 24upx 0;
			.title{
				margin-right: 24upx;
				line-height: 36upx;
			}
		}
		.list-box{
			width: 100%;
			margin-bottom: 24upx;
			.item{
				width: 100%;
				padding: 22upx;
				border-radius: 24upxpx;
				margin-bottom: 20upx;
				.car-other{
					.name{
						margin-bottom: 8upx;
					}
					.moneycar{
						margin-bottom: 16upx;
						line-height: 38upx;
						color: #EE8300;
					}
				}
				.car-logo{
					width: 156upx;
					height: 156upx;
					margin-right: 24upx;
					background: #FFFFFF;
					border-radius: 16upx;
				}
			}
			.color1{
				background: linear-gradient(97.86deg, #FFFFFF 40.26%, #EEF8FF 142.28%);
			}
			.color2{
				background: linear-gradient(97.86deg, #FFFFFF 30.12%, #FFF4E9 142.28%);
			}
		}
		.address-box{
			width: 100%;
			height: 92upx;
			.next-ic{
				width: 48upx;
				height: 48upx;
			}
			.locaiton{
				margin-left: 28upx;
				.locaiton-icon{
					height: 22upx;
					width: 20upx;
					margin-right: 8upx;
				}
			}
			.title{
				line-height: 42upx;
			}
		}
		.top-title{
			margin-bottom: 8upx;
		}
	}
	.bottom-l{
		height: 180upx;
	}
	.bottombtn-box{
		position: fixed;
		bottom: 0;
		height: 160upx;
		width: 750upx;
		background: #FFFFFF;
		.item-phone{
			.icon{
				width: 46upx;
				height: 44upx;
				margin-bottom: 12upx;
			}
		}
	}
	.setting-box{
		width: 100%;
		padding: 26upx 16upx;
		background: #FFFFFF;
		border-radius: 24upx;
		.imgaaa{
			height: 804upx;
			width: 100%;
			padding: 0 40rpx;
			.item{
				padding: 30upx 0;
				border-bottom: 2rpx solid #efefef;
			}
			.title{
				margin-right: 30rpx;
			}
		}
	}
	.service-btn{
		background: linear-gradient(180deg, #0E98E8 0%, #2466F2 100%);
		border-radius: 128upx;
		position: relative;
		width: 240upx;
		height: 96upx;
		.bottomflur{
			background: #2567F3;
			filter: blur(24px);
			border-radius: 108px;
			width: 178upx;
			height: 28upx;
			bottom: 0;
			position: absolute;
		}
	}
	.store-list-box{
		width: 100%;
		background: #FFFFFF;
		border-radius: 24upx;
		padding-top: 26upx;
		margin-bottom: 20upx;
		.store-scroll{
			width: 100%;
			padding-left: 34upx;
			height: 240upx;
			.scroll{
				width: 100%;
				white-space: nowrap;
				height: 216upx;
				.scroll-viewa{
					display: inline-flex;
					.item{
						width: 420upx;
						padding: 24upx 18upx 12upx 18upx;
						border-radius: 8upx;
						height: 216upx;
						background: #F8FAFF;
						position: relative;
						margin-right: 14upx;
						.active-store{
							margin-right: 26upx;
							border-radius: 50%;
							width: 36upx;
							height: 36upx;
							position: absolute;
							right: 18upx;
							top: 26upx;
							.duigou{
								width: 24upx;
								height: 16upx;
							}
						}
						.active{
							background: #2567F3;
						}
						.unactive{
							border: 2upx solid #9F9F9F;
						}
						.address{
							margin-bottom: 46upx;
						}
						.store-name{
							line-height: 40upx;
							margin-bottom: 10upx;
						}
					}
				}
			}
		}
	}
	.operate-box{
		width: 100%;
		.item2{
			border-radius: 8upx;
			margin-right: 12upx;
			width: 184upx;
			height: 58upx;
			.phone-icon{
				width: 24upx;
				height: 24upx;
				margin-right: 16upx;
			}
		}
		.bg1{
			background: #F1F5FE;
			border: 1upx solid #2567F3;
			color: #2567F3;
			
		}
		.bg2{
			background: #2567F3;
			color: #FFFFFF;
			
		}
	}
	.location-name-box{
		padding: 0 34upx;
		margin-bottom: 22upx;
		.right{
			.icon{
				width: 20upx;
				height: 20upx;
				margin-left: 8upx;
			}
		}
		.left{
			line-height: 42upx;
		}
	}
	.fenqi-box{
		padding: 26upx 34upx;
		background: #FFFFFF;
		border-radius: 24upx;
		height: 100upx;
		margin-bottom: 20upx;
		.right{
			width: 164upx;
			height: 48upx;
			background: #2567F3;
			border-radius: 10upx 0px 8upx;
			.jisuanqi{
				width: 24upx;
				height: 24upx;
				margin-right: 14upx;
			}
		}
		.left{
			line-height: 40upx;
			.name{
				position: relative;
				margin-right: 60upx;
				.hot-icon{
					width: 50upx;
					height: 28upx;
					position: absolute;
					right: -50upx;
					top: -28upx;
				}
			}
		}
	}
	.mar-b20{
		margin-bottom: 20upx;
	}
	.car-info-box{
		width: 100%;
		padding: 38upx;
		background: linear-gradient(180deg, rgba(0, 0, 0, 0.15) 0%, #FFFFFF 64.92%);
		border-radius: 24upx;
		.moneycar{
			margin-bottom: 16upx;
			line-height: 38upx;
			color: #EE8300;
			margin-top: 32upx;
		}
		.tag-list-box{
			width: 100%;
			.item{
				padding: 4upx 14upx;
				border: 2upx solid #2567F3;
				border-radius: 4upx;
				margin-right: 24upx;
			}
		}
		.car-name{
			margin-bottom: 18upx;
			line-height: 42upx;
		}
	}
	.top-image{
		width: 100%;
		height: 524upx;
		position: absolute;
		z-index: 2;
		top: 0;
		left: 0;
		transform: translateY(-160rpx);
	}
	.content{
		width: 750upx;
		padding: 0 24upx 0;
		position: relative;
		z-index: 2;
		min-height: 100vh;
		transform: translateY(342upx);
	}
</style>
